<template>
    <div class="teacherlist">
        <div class="left">
            <el-input class="input" size="small" placeholder="请输入学校名称" prefix-icon="search" />
            <el-tree :data="data" class="inp" icon="plus" />
        </div>
        <div class="right">
            <el-form :inline="true" class="demo-form-inline">
                <el-form-item>
                    <el-input v-model="inp1" placeholder="请输入姓名" />
                </el-form-item>
                <el-form-item>
                    <el-input v-model="inp2" placeholder="请输入账号" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                    <el-button type="success" @click="addstudent">新增</el-button>
                </el-form-item>
            </el-form>
            <el-table :data="list" border style="width: 100%" stripe="true">
                <el-table-column label="序号" prop="">
                    <template #default="scope">
                        <span>{{ scope.$index + 1 }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="" label="所属学校">
                    <template #default="scope">
                        <span>{{ scope.row.classes.school.name }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="家长姓名"></el-table-column>
                <el-table-column prop="phone" label="联系方式" />
                <el-table-column prop="id" label="账号">
                </el-table-column>
            </el-table>
            <div class="fy">
                <el-pagination layout="prev, pager, next" background :total="page * 10"
                    @current-change="handleCurrentChange" />
                <span>{{ `共&nbsp;&nbsp;${page}&nbsp;&nbsp;页` }}</span>
                <span>跳至</span>
                <el-input v-model="input" />
                <span>页</span>
                <el-button @click="jump">确定</el-button>
                <el-select v-model="select" placeholder="6页/条 " style="width: 115px">
                    <el-option label="4页/条" value="4" @click="fn" />
                    <el-option label="5页/条" value="5" @click="fn" />
                    <el-option label="6页/条" value="6" @click="fn" />
                </el-select>
            </div>
            <el-drawer v-model="drawer" title="新增家长" :with-header="false">
                <el-form label-width="100px" :model="form" style="max-width: 460px" ref="formref">
                    <div style="width: 100%;text-align: center;margin-bottom: 30px;">
                        新增家长
                    </div>
                    <el-form-item label="name：">
                        <el-input v-model="form.name" />
                    </el-form-item>
                    <el-form-item label="classId：">
                        <el-input v-model="form.classId" />
                    </el-form-item>
                    <el-form-item label="sex：">
                        <el-input v-model="form.sex" />
                    </el-form-item>
                    <el-form-item label="documentNum：">
                        <el-input v-model="form.documentNum" />
                    </el-form-item>
                    <el-form-item label="phone：">
                        <el-input v-model="form.phone" />
                    </el-form-item>
                    <el-form-item label="password：">
                        <el-input v-model="form.password" />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="tijiao">确定</el-button>
                    </el-form-item>
                </el-form>
            </el-drawer>
        </div>
    </div>
</template>

<script setup lang="ts">
import server from '@/api'
import { ElNotification } from 'element-plus';
import { ref, onMounted } from 'vue'
var list = ref()
var inp1 = ref()
var inp2 = ref()
var page: any = ref()
const cp = ref('1')
const ps = ref('6')
const input: any = ref('')
const select: any = ref('')
const value = ref('')
var drawer: any = ref(false)
var form: any = ref({ name: '', classId: '', sex: '', documentNum: '', phone: '', password: '' })
var formref = ref()
var addstudent: any = () => {
    drawer.value = true
}
var tijiao = async () => {
    var res = await server.home.saveStudent(form.value)
    if (res.data.code == 200) {
        ElNotification.success({ message: '新增成功' });
    } else {
        ElNotification.error({ message: '新增失败' });
    }
}
const data = [
    {
        label: '教育局',
        children: [
            {
                label: '小学',
                children: [
                    {
                        label: '智慧校园'
                    },
                    {
                        label: '智慧校园'
                    },
                    {
                        label: '智慧校园'
                    }
                ]
            }
        ]
    }
]
var content: any
onMounted(async () => {
    var res = await server.home.student_getStudentByPage({ cp: cp.value, ps: ps.value })
    // console.log(res.data.data.date);
    list.value = res.data.data.date
    content = res.data.data.date
    // console.log(list.value);
    page.value = res.data.data.page.pages

})
//点击切换页数
const handleCurrentChange = async (val: any) => {
    cp.value = val
    // reduce()
    var res = await server.home.student_getStudentByPage({ cp: cp.value, ps: ps.value })
    // console.log(res.data.data.date);
    list.value = res.data.data.date
    page.value = res.data.data.page.pages
}
//一页多少条数据
async function fn() {
    ps.value = select.value
    var res = await server.home.student_getStudentByPage({ cp: cp.value, ps: ps.value })
    // console.log(res.data.data.date);
    list.value = res.data.data.date
    page.value = res.data.data.page.pages
    // reduce()
}

//跳转页数
async function jump() {
    if (input.value > page.value) {
        ElNotification.success({ message: '请输入正确页数' });
        input.value = ''
        return
    }
    cp.value = input.value
    // reduce()
    var res = await server.home.student_getStudentByPage({ cp: cp.value, ps: ps.value })
    // console.log(res.data.data.date);
    list.value = res.data.data.date
    input.value = ''
}

var onSubmit = () => {
    const kb = JSON.parse(JSON.stringify(content))
    // console.log(kb);
    if (inp1.value) {
        list.value = kb.filter((item: any) => item.name.includes(inp1.value))
    }
    if (inp2.value) {
        list.value = kb.filter((item: any) => item.id.includes(inp2.value))
    }
    if (inp1.value && inp2.value) {
        list.value = kb.filter((item: any) => item.name.includes(inp1.value) && item.id.includes(inp2.value))
    }
    if (!inp1.value && !inp2.value) {
        list.value = kb
    }

}
</script>

<style scoped>
.teacherlist {
    width: 100%;
    height: 584px;
    background: #f7f7f7;
    display: flex;
}

.left {
    width: 200px;
    height: 570px;
    margin-right: 15px;
    background: #fff;
    text-align: center;
    padding: 10px;
}

.input {
    margin-bottom: 10px;
}

.el-tree {
    --el-tree-node-hover-bg-color: none
}

.right {
    flex: 1;
    height: 550px;
    background: #fff;
    padding: 40px 20px 0 20px;
    position: relative;
}

.fy {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 10px;
    position: absolute;
    bottom: 50px;
    right: 50px;
}

.fy .el-input {
    width: 5%;
}

.fy span,
.fy .el-select {
    margin: 0px 10px;
}
</style>